<template>
  <div
    :class="{ 'com-web-header-alpha': isNavAlpha }"
    class="com-web-header"
  >
    <a-menu
      theme="dark"
      mode="horizontal"
      :default-selected-keys="[activeName]"
      :style="{ lineHeight: '64px' }"
      @click="menuClick"
    >
      <a-menu-item v-for="item in leftMenus" :key="item.path">
        <span class="menu-item-text">{{ item.name }}</span>
      </a-menu-item>
      <a-menu-item key="nav-right-login" class="w-float-right">
        <a-avatar v-if="isLogin" :size="40" :src="userIcon" class="user-icon w-pointer"/>
        <a-icon v-else type="user" />
      </a-menu-item>
      <a-menu-item v-for="item in navRightItems" :key="item.key" class="w-float-right">
        <a-tooltip placement="bottom">
          <template slot="title">
            {{ item.tip }}
          </template>
          <a-icon :type="item.icon" />
        </a-tooltip>
      </a-menu-item>
    </a-menu>
    <w-modal ref="WClockModal" hide-footer>
      <w-clock />
    </w-modal>
    <w-feedback ref="WFeedback"/>
    <w-chat ref="WChat"/>
    <check-login ref="CheckLogin"/>
  </div>
</template>

<script lang="ts">
import { Vue, Component } from 'vue-property-decorator'
import { Getter, State } from 'vuex-class'
import WClock from '@/components/global/clock/index'
import WFeedback from '@/components/web/feedback/add'
import WChat, { ComGlobalChatType } from '@/components/global/chat'
import { MenuItem } from 'ant-design-vue/types/menu/menu-item'
import WModal, { ModalComType } from '@/components/global/modal'
import CheckLogin from '@/components/OAuth/checkLogin'
import { leftMenus, rightMenus } from './utils'

@Component({
  name: 'ComWebHeader',
  components: {
    WClock,
    WFeedback,
    WChat,
    WModal,
    CheckLogin
  }
})
export default class ComWebHeader extends Vue {
  @Getter('auth/IS_LOGIN') isLogin!: boolean
  @Getter('auth/USER_ICON') userIcon!: string

  @State(state => state.app.navIndex) activeName!:string

  leftMenus = leftMenus
  navRightItems = rightMenus
  innerHeight = 100
  scrollTop = 0

  get isNavAlpha () {
    return this.$route.path === '/' && this.scrollTop < this.innerHeight - 60
  }

  mounted () {
    this.innerHeight = window.innerHeight
    this.scrollTop = document.documentElement.scrollTop
    window.onresize = () => {
      this.innerHeight = window.innerHeight
    }
    window.onscroll = () => {
      this.scrollTop = document.documentElement.scrollTop
    }
  }

  menuClick (item: MenuItem) {
    switch (item.key) {
      case 'nav-right-clock':
        (this.$refs.WClockModal as ModalComType).show()
        break
      case 'nav-right-api':
        window.open('/webnuxt-api/public/docs/api/index.html#/')
        break
      case 'nav-right-login':
        this.$router.push('/login')
        break
      case 'nav-right-feedback':
        (this.$refs.WFeedback as any).show()
        break
      case 'nav-right-chat':
        if ((this.$refs.CheckLogin as any).check(true)) {
          (this.$refs.WChat as ComGlobalChatType).show()
        }
        break
      case 'nav-right-oauth':
        (this.$refs.CheckLogin as any).toOAuth()
        break
      default:
        this.$router.push(item.key)
    }
  }
}
</script>
<style lang="less" scoped>
.com-web-header {
  position: relative;
  .right-box {
    list-style: none;
    .item {
      float: right;
      padding: 0 20px;
      color: #ccc;
    }
    .item:hover {
      color: #00c1de;
    }
    .user-icon {
      margin-top: 15px;
      display: block;
      width: 30px;
      height: 30px;
    }
  }
}
</style>
<style lang="less">
.com-web-header {
  .ivu-menu-dark {
    .ivu-menu-item:hover,
    .ivu-menu-item-selected {
      color: #00c1de !important;
    }
  }
}
.com-web-header-alpha {
  .ant-menu, .ant-menu.ant-menu-dark .ant-menu-item-selected {
    background-color: rgba(0, 0, 0, 0);
  }
  .ant-menu-item-selected {
    color: #fff;
    .menu-item-text {
      height: 4px;
      width: 100%;
      padding: 5px 0;
      border-bottom: 2px solid #fff;
    }
  }
}
</style>
